import * as THREE from 'three';
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader} from 'three/addons/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import {TrackballControls} from 'three/addons/controls/TrackballControls.js';

(function(){

 //创建一个三维场景
	const devicePixelRatio = window.devicePixelRatio;//设备分辨率
	let scene,light,spotLight,renderer,controls,camera

	//初始化场景元素
const initCanvas=()=>{
	initScene()
	initLight()
	initCamera()
	//initASphere()
	initSceneItems()
	initARenderer()
	initAControls()
}
	const initScene=()=>{
		scene = new THREE.Scene()
		// 场景设置
		// scene.background = new THREE.Color('#03244a')
		//在代码上面声明场景等下面加这句:
		//scene.fog = new THREE.Fog('#eee', 120, 150)
		//创建辅助坐标轴
		// const axesHelper = new THREE.AxesHelper(100)
		// scene.add(axesHelper)
		//加个地板 投射影子
		// let floorGeometry = new THREE.PlaneGeometry(50, 50,32, 32) //形状
		// let floorMaterial =new THREE.MeshStandardMaterial( {color: 0x03244a} );//材质
		// let floor = new THREE.Mesh(floorGeometry, floorMaterial)
		// floor.rotation.x = -0.5 * Math.PI
		// floor.receiveShadow = true
		// floor.position.y = -0.001
		// scene.add(floor)
	}

	//创建灯光
const initLight=()=>{
	// const ambient = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.05 );
	light = new THREE.AmbientLight( 0xffffff, 0.5 ); // soft white light
	scene.add( light );
	// 聚光灯
	spotLight = new THREE.SpotLight( 0xffffff, 5 );
	spotLight.position.set( 25, 150, 75 );
	spotLight.angle = Math.PI / 6;
	spotLight.penumbra = 1;
	spotLight.decay = 2;
	spotLight.distance = 300;
	// spotLight.map = textures[ 'disturb.jpg' ];
	spotLight.castShadow = true;//可以产生阴影
	spotLight.shadow.mapSize.width = 2048;
	spotLight.shadow.mapSize.height = 2048;
	spotLight.shadow.camera.near = 10;
	spotLight.shadow.camera.far = 200;
	spotLight.shadow.focus = 1;
	scene.add( spotLight );
}

//创建相机
const initCamera=()=>{
	//创建一个透视相机
	const width = document.getElementById('three').offsetWidth
	const height =document.getElementById('three').offsetHeight
	// console.log(width);
	camera = new THREE.PerspectiveCamera(80, width/height, 1, 3000)
	//设置相机位置
	//x 轴红色  y绿色  z  蓝色
	camera.position.set(0,0,7.5)
	// camera.position.set(200, 200, 200);
	// camera.layers.disableAll();
	// camera.layers.enableAll();
	// camera.layers.disable( 1);
	// camera.layers.enable( 1);
	//设置相机方向
	// camera.lookAt(0,-5,0)
	//创建助手
	// const helper = new THREE.CameraHelper( spotLight.shadow.camera );
	// scene.add( helper );
}

//创建场景元素
const initSceneItems=()=>{
	const gltfLoader2 = new GLTFLoader();
	var dracoLoader = new DRACOLoader();
	// dracoLoader.setDecoderPath( '/js/draco/' );
	dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
	gltfLoader2.setDRACOLoader( dracoLoader );
	const url2 = './guolu.glb';
	gltfLoader2.load(url2, (gltf) => {
		const root = gltf.scene;
		console.log(root.children);
		// 给每个mesh 添加阴影
		root.traverse( function( node ) {
			if ( node instanceof THREE.Mesh ) { node.castShadow = true; }
		} );
		const mesh=root
		//纹理贴图加载器TextureLoader
		const texLoader = new THREE.TextureLoader();
		// .load()方法加载图像，返回一个纹理对象Texture
		const texturei = texLoader.load('./assets/d.png');
		const materiali = new THREE.MeshLambertMaterial({
				// 设置纹理贴图：Texture对象作为材质map属性的属性值
				map: texturei,//map表示材质的颜色贴图属性
		});

		const textureh = texLoader.load('./assets/b.png');
		const materialh = new THREE.MeshLambertMaterial({
				// 设置纹理贴图：Texture对象作为材质map属性的属性值
				map: textureh,//map表示材质的颜色贴图属性
		});




		// mesh.children[4].material.map=texture
		mesh.children[4].material.opacity=0.4
		mesh.children[4].material.transparent=true
		mesh.children[5].material.transparent=true
		mesh.children[5].material.opacity=0.4
		// mesh.children[5].geometry =
		mesh.children[6].material=materiali
		mesh.children[7].material=materialh
		mesh.position.y =- 4
		mesh.position.x = 0
		mesh.position.z = 0
		mesh.rotation.y = 0
		mesh.castShadow = true; //有阴影
		// mesh.scale.set(0.2,0.2,0.2);
		console.log(mesh);
		scene.add(mesh);

	},
	// 加载过程回调函数onProgress：加载过程不停地重复执行该函数中代码
	function ( xhr ) {
		// 控制台查看加载进度xhr
		// 通过加载进度xhr可以控制前端进度条进度   Math.floor:小数加载进度取整
		console.log('加载进度'+Math.floor(xhr.loaded / xhr.total * 100)+'%');
	},
	// 加载错误回调函数onError
	function ( err ) {
		console.error( '加载发生错误' );
	}
);
}

//创建渲染
const initARenderer=()=>{
	renderer = new THREE.WebGLRenderer( { antialias: true,logarithmicDepthBuffer: true,alpha: true, } );
	// renderer.setPixelRatio (devicePixelRatio)
	renderer.setPixelRatio( window.devicePixelRatio );
	// console.log(document.getElementById('three').offsetWidth);
	renderer.setSize(document.getElementById('three').offsetWidth, document.getElementById('three').offsetHeight );
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	// renderer.outputEncoding = THREE.sRGBEncoding;
}

const render=()=>{
	// console.log(renderer);
	renderer.render(scene,camera)
	// labelRenderer.render( scene, camera )
		controls.update();
	requestAnimationFrame(render);
}


window.addEventListener( 'resize', onWindowResize );

function onWindowResize() {
	camera.aspect = document.getElementById('three').offsetWidth /document.getElementById('three').offsetHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( document.getElementById('three').offsetWidth, document.getElementById('three').offsetHeight );
	// labelRenderer.setSize(document.getElementById('three').offsetWidth, document.getElementById('three').offsetHeight );
	// labelRenderer.render( scene, camera )
	// renderer.render(scene, camera)

}

//创建相机控制器
const initAControls=()=>{
	// controls.enableDamping = true
	// 设置阻尼

	//controls = new TrackballControls(camera, document.querySelector('#three'));
	// controls.noZoom = true;
	console.log(controls);
	//controls.noPan = true;
	// controls.handleResize();
	controls = new OrbitControls(camera, document.querySelector('#three'))
//controls = new OrbitControls(camera, renderer.domElement)
	controls.update();
	controls.autoRotate=true
	// controls.enableDamping = true;
	controls.autoRotateSpeed = 1;
	// controls.enableRotate=false
	// controls.enablePan=false  //右键平移
	 //
	// controls.maxAzimuthAngle=0
	// controls.minAzimuthAngle=0
	// controls.maxPolarAngle=0
	// controls.minPolarAngle=0

	// controls.addEventListener('change',()=>{
	//   console.log('change');
	//   renderer.render(scene, camera)
	// // labelRenderer.render( scene, camera )
	//
	// })
}


initCanvas()
	// console.log(renderer.domElement);
document.getElementById('three')?.appendChild(renderer.domElement)
render()
	//createSpriteText()
const initDataFromINnput=()=>{
	//重置数据
	// 获取输入框值

}

const initEvent=(str)=>{//
	 //获取事件元素
	 let oFootBtns=document.getElementById(str).children //底部菜单 btns
	 for (let i = 0; i < oFootBtns.length; i++) {
		 oFootBtns[i].onclick=()=>{
			 for (let ii = 0; ii < oFootBtns.length; ii++) {
				 oFootBtns[ii].className = ""
			 }
			 oFootBtns[i].className = "active"
			if(str=="zbf_r_btns"){
				if(i==8){
					for (let o = 6; o < 14; o++) {
						scene.children[2].children[o].visible=false
					}
				}else{
					scene.children[2].children[13-i].visible=!scene.children[2].children[13-i].visible
				}
			}else{
				switch (i) {
					case 0:
						window.location.href="/main/dcimgs/gl/main.html"
						break;
					default:

				}

			}
		 }
	 }
}
initEvent('zbf_foot_btns') //底部菜单 btns


})()
